<template>
  <picker
    @change="bindPickerChange"
    :value="index"
    v-if="pickerOptions.length"
    :range="pickerOptions"
  >
    <view
      :class="
        cn(
          'h-10 relative rounded-full border border-[rgba(0,0,0,0.16)] flex items-center px-3 acitve:border-primary active:border-primary transition-[border-color] duration-[0.3s]',
          showValue ? '' : 'text-placeholder'
        )
      "
    >
      {{ showValue ?? placeholder }}
      <uni-icons
        color="var(--secondary)"
        type="down"
        size="16"
        class="absolute right-3 top-2.5"
      />
    </view>
  </picker>
</template>
<script>
import { cn } from "../../../uni-common/utils";
export default {
  props: {
    placeholder: {
      type: String,
      default: "请选择",
    },
    modelValue: {
      type: [String, Number],
    },
    options: {
      type: Array,
      default: () => [], // 选项列表
    },
  },
  data() {
    this.cn = cn;
    return {};
  },
  computed: {
    pickerOptions() {
      return this.options.map((item) => item.label);
    },
    showValue() {
      return this.options.find((option) => option.value === this.modelValue)
        ?.label;
    },
    index() {
      const index = this.options.findIndex(
        (item) => item.value === this.modelValue
      );
      return index === -1 ? 0 : index;
    },
  },

  methods: {
    bindPickerChange: function (e) {
      const value = this.options[e.detail.value].value;
      this.$emit("update:modelValue", value);
    },
  },
};
</script>
